<template>
    <div class="container">
        <el-table v-loading="loading" :data="tableData" height="calc(100% - 0px)">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column label="状态" align="center" prop="status" >
            <template #default="scope">
                {{ scope.row.status == 0?"草稿":scope.row.status == 1?
                "已上报":scope.row.status == 2?"已下发":scope.row.status ==3?"已完成":""}}
                </template>
            </el-table-column>
            <el-table-column label="应急类型" align="center" prop="emergencyTypeValue" />
            <el-table-column label="上报时间" align="center" prop="createTime" />
            <el-table-column label="上报人" align="center" prop="userName"></el-table-column>
            <el-table-column label="风险类型" align="center" prop="riskTypeValue" />
            <el-table-column label="风险概述" align="center" prop="riskTypeValue" />
            <el-table-column label="风险位置" align="center" prop="riskLocation" />
            <el-table-column label="现场图片" align="center" >
                <template #default="scope">
                    <el-button link type="primary" @click="handleImg(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="责任工区" align="center" prop="workArea" />
            <el-table-column label="责任人" align="center" prop="person" />
            <el-table-column label="下发人员" align="center" prop="distributeUserNames" />
            <el-table-column label="确认人员" align="center" prop="confirmUserNames" />
            <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" @click="handleSend(scope.row)">{{ scope.row.status == 2?"已下发":scope.row.status ==3?"已完成":"下发" }}</el-button>
                    <el-button link type="primary" @click="handleOk(scope.row)">处置完成</el-button>
                    <!-- <el-button link type="primary" v-show="scope.row.status == 3" @click="details(scope.row)">查看</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <!-- 下发对话框 -->
        <el-dialog title="应急任务管理" v-model="open" width="500px" append-to-body>
            <el-button type="primary" @click="addPeople" :disabled="disabled">新增</el-button>
            <el-table :data="sendList" height="400px">
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column label="单位" align="center" prop="deptName">
                </el-table-column>
                <el-table-column label="姓名" align="center" prop="userName">
                </el-table-column>
                <el-table-column label="电话" align="center" prop="phoneNumber"></el-table-column>
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm" :disabled="disabled">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog title="选择人员" v-model="openPerson" width="500px" append-to-body>
            <el-select
              v-model="distributeUserIds"
              placeholder="请选择成员"
              filterable
              clearable
              multiple
            >
              <el-option
                v-for="item in personList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              <span style="float: left; margin-right: 10px;">{{item.userName}} <span v-show="item.deptName && item.deptName!= null">{{"&nbsp;&nbsp;--&nbsp;&nbsp;" + item.deptName}}</span></span>
              <!-- <span style="float: left; margin-right: 10px;">{{ item.userName + "&nbsp;&nbsp;--&nbsp;&nbsp;" +item.deptName}}</span> -->
            </el-option>
            </el-select>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="makesure">确 定</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="imgVisible" title="预览" width="800px" append-to-body>
            <img :src="imgUrl" style="display: block; max-width: 100%; margin: 0 auto;" />
        </el-dialog>
    </div>
</template>

<script setup>
    import {getPersonBy,getCompleted,getTaskUser,sendTask,getTaskList} from "@/api/work";
    import {
        ElMessage,
        ElMessageBox
    } from 'element-plus'
    const {
        proxy
    } = getCurrentInstance();

    const distributeUserIds = ref([]);
    const tableData = ref([]);
    const sendList = ref([]);
    const open = ref(false);
    const openPerson = ref(false);
    const loading = ref(true);
    const imgUrl = ref("");
    const imgVisible = ref(false);
    const disabled = ref(false);
    const personList = ref([]);

    const data = reactive({
        form: {},
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            configName: undefined,
            configKey: undefined,
            configType: undefined
        },
        rules: {
            configName: [{
                required: true,
                message: "参数名称不能为空",
                trigger: "blur"
            }],
            configKey: [{
                required: true,
                message: "参数键名不能为空",
                trigger: "blur"
            }],
            configValue: [{
                required: true,
                message: "参数键值不能为空",
                trigger: "blur"
            }]
        }
    });

    const {
        queryParams,
        form,
        rules
    } = toRefs(data);


    function getPerson() {
        getPersonBy().then(res => {
            personList.value = res.rows 
        })
    }
    getPerson()

    function handleImg(row) {
        imgVisible.value = true
        if (row.fileUrl && row.fileUrl !="") {
            imgUrl.value =row.fileUrl
        }else{
            imgUrl.value = ""
        }
    }
    /** 查询参数列表 */
    function getList() {
        loading.value = true;
        getTaskList().then(response => {
            tableData.value = response.rows;
            loading.value = false;
        });
    }
    getList()
    /** 取消按钮 */
    function cancel() {
        open.value = false;
    }
    const selectRowId = ref(null)
    /** 下发按钮操作 */
    function handleSend(row) {
        if(row.status ==3){ //已完成 禁止点击下发
            disabled.value = true
        }else{
            disabled.value = false
        }
        open.value = true
        selectRowId.value = row.id
        getTaskUser({id:row.id}).then(res=>{
            sendList.value = res.rows
        })
    }
    /** 新增按钮操作 */
    function addPeople() {
        distributeUserIds.value = []
        if(sendList.value != null && sendList.value.length){
            sendList.value.forEach(item=>{
                distributeUserIds.value.push(item.userId)
            })
        }
        openPerson.value = true
    }
    function makesure(){
        if(distributeUserIds.value.length){
            sendList.value = []
            distributeUserIds.value.forEach(item=>{
                personList.value.forEach(val=>{
                    if(item == val.userId){
                        val.phoneNumber = val.phonenumber
                        sendList.value.push(val)
                    }
                })
            })
        }else{
            sendList.value = []
        }
        openPerson.value = false
    }
    /** 处置完成按钮操作 */
    function handleOk(row) {
        ElMessageBox.confirm(
                '确认当前事件处置完成？',
                '应急事件处置', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                getCompleted({id:row.id}).then(res=>{
                    if(res.code==200){
                        getList()
                        ElMessage({
                            type: 'success',
                            message: '操作成功',
                        })
                    }
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作',
                })
            })
    }
    /** 查看按钮操作 */
    function details(row) {
        disabled.value = true
        open.value = true
        getTaskUser({id:row.id}).then(res=>{
            sendList.value = res.rows
        })
    }
    /** 提交按钮 */
    function submitForm() {
        sendTask({
            id:selectRowId.value,
            distributeUserIds:distributeUserIds.value.join(",")
        }).then(res=>{
            open.value = false
            getList()
        })
    }
</script>

<style scoped>

.container {
    height: 100%;
    width: 100%;
    padding: 20px;
  }
</style>